 
<header id="header" class="mui-bar mui-bar-black mui-bar-nav">
    <a class="mui-icon mui-icon-left-nav mui-pull-left"  href="{:url('site/site_list')}"></a>
    <h1 class="mui-title">{$result.building_name}</h1>
</header>
 {include file="site/site_nav" /}
<div class="mui-content mui-content-my user-msg" style="margin-top: 1em;padding-top: 0">
    <div class="mui-row">
        <div class="mui-col-xs-4">
            班主<?php echo count($bzlist);?>人
        </div>
        <div class="mui-col-xs-8">
            <ul>
{volist name="bzlist" id="vv"}  
                <li class="mui-table-view-cell">{$vv.username} <a class="msg-a" href="#">查看个人信息</a></li>
{/volist}             
            </ul>
        </div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">
            施工员<?php echo count($sgylist);?>人
        </div>
        <div class="mui-col-xs-8">
            <ul>
  {volist name="sgylist" id="vv"}  
                <li class="mui-table-view-cell">{$vv.username} <a class="msg-a" href="#">查看个人信息</a></li>
{/volist}
            </ul>
        </div>
    </div>
        <div class="mui-row">
        <div class="mui-col-xs-4">
            施工工人<?php echo count($sggrlist);?>人
        </div>
        <div class="mui-col-xs-8">
            <ul>
  {volist name="sggrlist" id="vv"}  
                <li class="mui-table-view-cell">{$vv.username} <a class="msg-a" href="#">查看个人信息</a></li>
{/volist}
            </ul>
        </div>
    </div>
</div>
<script src="__CDN__/style/js/jquery-1.11.3.js"></script>
<script>
 $(function () {
    var startX=0,startY=0,moveEndX=0,moveEndY=0,X=0,Y=0,nowX=0;
    var a=$("#navBar");
    var navWidth=parseInt(a.css('width'));
    //var ulWidth=parseInt(a.children().css('width'));
    var ulWidth=parseInt(a.children().children().css('width'))*7+20;
    a.children().css('width',ulWidth);

    a.on("touchstart", function(e) {
        // e.preventDefault();
        startX = e.originalEvent.changedTouches[0].pageX;
        startY = e.originalEvent.changedTouches[0].pageY;
        nowX=parseInt(a.children().css('left'));
    });
    a.on("touchmove", function(e) {
        // e.preventDefault();
        moveEndX = e.originalEvent.changedTouches[0].pageX;
        moveEndY = e.originalEvent.changedTouches[0].pageY;
        X = moveEndX - startX;
        Y = moveEndY - startY;
        if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
            // alert("left 2 right");
            //console.log(X,Y);
            if((X+nowX)<0){
                a.children().css('left',(X+nowX)+'px');
            }
        }
        else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
            //alert("right 2 left");
            //console.log(navWidth,ulWidth,navWidth-ulWidth);
            //console.log(liWidth);
            if((X+nowX)>(navWidth-ulWidth)){
                a.children().css('left',(X+nowX)+'px');
            }
        }
        else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
            //alert("top 2 bottom");
        }
        else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
            //alert("bottom 2 top");
        }
        else{
            //alert("just touch");
        }
    });
 });
 $(function () {
     $('.mui-col-xs-4').each(function () {
         var a =$(this).parents('.mui-row').css('height');
         $(this).css({height:a,'padding-top':(parseInt(a)/2-20)+"px",'text-align': 'center'});
     })
 })
</script>
 